<script setup lang="ts">
import { ElMessage, UploadProps, UploadRawFile } from 'element-plus'
import { onMounted } from 'vue'
import useSwiperStore from '@/store/modules/swiper'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const useSwiper = useSwiperStore()
const swiperData = [
  { name: 'swiper1' },
  { name: 'swiper2' },
  { name: 'swiper3' },
  { name: 'swiper4' },
  { name: 'swiper5' },
  { name: 'swiper6' },
]
// 上传头像成功后的处理函数
const handleSwiperSuccess: UploadProps['onSuccess'] = (response) => {
  ElMessage({
    type: response.status == 0 ? 'success' : 'error',
    message: response.status == 0 ? `${response.message}` : '上传失败',
  })
  useSwiper.getAllSwiper()
}
// 上传头像之前的处理函数
const beforeSwiperUpload = (rawFile: UploadRawFile) => {
  if (userStore.identity == '用户') {
    ElMessage.error('您无权进行修改！')
    return false // 直接返回false阻止上传
  }
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像必须是jpg格式!')
    return false // 类型不匹配，返回false阻止上传
  }
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像必须小于2MB!')
    return false // 大小超过限制，返回false阻止上传
  }
  return true // 所有检查都通过，返回true允许上传
}
onMounted(() => {
  useSwiper.getAllSwiper()
})
</script>

<template>
  <div class="swiper-wrapped">
    <span class="tips">提示：点击图片框进行切换首页轮播图</span>
    <el-scrollbar height="750px">
      <div class="item-box">
        <div class="item" v-for="(item, i) in swiperData" :key="i">
          <div class="span">轮播图{{ i + 1 }}:</div>
          <div class="img">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:3000/set/uploadSwiper"
              :show-file-list="false"
              :on-success="handleSwiperSuccess"
              :before-upload="beforeSwiperUpload"
              :data="item"
            >
              <template #trigger>
                <img
                  v-if="useSwiper.imageUrl[i]"
                  :src="useSwiper.imageUrl[i]"
                  class="avatar"
                />
                <img src="@/assets/background.jpg" class="avatar" v-else />
              </template>
            </el-upload>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.swiper-wrapped {
  display: flex;
  width: 470px;
  flex-direction: column;

  .tips {
    margin: 10px 0;
  }

  .item-box {
    display: flex;
    flex-direction: column;

    .item {
      display: flex;
      margin: 7px;

      .span {
        display: flex;
        align-items: center;
        margin-right: 15px;
      }
    }
  }
}

.avatar-uploader .avatar {
  width: 370px;
  height: 170px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
